﻿<!DOCTYPE HTML>
<html lang="en">
<head>
    <title id='Description'>jqxChart x-Axis Color Bands</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
              {
                  datatype: "tsv",
                  datafields: [
                      { name: 'Year' },
                      { name: 'Northeast' },
                      { name: 'South' },
                      { name: 'Midwest' },
                      { name: 'West' },
                      { name: 'UnitedStates' }
                  ],
                  url: '../sampledata/us_homeownership_rate.csv'
              };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            var recessions =
            [
                { from: 1969.91, to: 1970.83 },
                { from: 1973.83, to: 1975.25 },
                { from: 1980, to: 1980.58 },
                { from: 1981.58, to: 1982.83 },
                { from: 1990.58, to: 1991.25 },
                { from: 2001.25, to: 2001.83 },
                { from: 2007.91, to: 2009.5 }
            ];

            var bands = [];
            for (var i = 0; i < recessions.length; i++)
                bands.push({ minValue: recessions[i].from, maxValue: recessions[i].to, fillColor: 'red', opacity: 0.2 });

            var settings = {
                title: "US Homeownership rate & recessions (1965-2014)",
                description: "(sources: US Census bureau, Wikipedia)",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Year',
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    labels: { angle: -90 },
                    unitInterval: 1,
                    flip: false,
                    bands: bands // attach the color bands to the xAxis
                },
                valueAxis:
                {
                    title: { text: 'Homeownership rate<br>' },
                    labels: {
                        formatSettings: { sufix: '%' }
                    },
                    bands: [
                      //  { minValue: 60, maxValue: 63 }
                    ],
                    flip: false
                },
                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            series: [
                                    { dataField: 'Northeast', displayText: 'NorthEast' },
                                    { dataField: 'South' },
                                    { dataField: 'Midwest', displayText: 'MidWest' },
                                    { dataField: 'West' },
                                    { dataField: 'UnitedStates', displayText: 'United States' },
                                ]
                        }
                    ]
            };

            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>    
</body>
</html>
